<!-- 供求与招聘 -->
<template>
  <div class="supply" v-if="(listBuy && listBuy.length > 0) || (listSupply && listSupply.length > 0)">
    <div class="wCen animate__fadeInUp ">
      <div class="homeTitle">
        <span class="homeTitle_l">{{ $t("demand-t1") }} </span>
        <span class="homeTitle_r" v-if="localeCn">SUPPLY & DEMAND</span>
      </div>
      <!-- 供求 -->
      <div class="listBox">
        <!-- 左侧 -->
        <div class="listBox_l">
          <div class="titleSecond titleSecond-1">{{ $t("demand-t31") }}</div>
          <ul class="list">
            <li class="list_i" v-for="(item, idx) in listBuy" :key="idx" @click="go2DemandDetail(item)">
              <p class="list_i_t text_e-1">【{{ $t("demand-t31") }}】{{ item.title }}</p>
              <p class="list_i_date">{{ parseTime(item.createTime) }}</p>
            </li>
          </ul>
          <div class="more" @click="go2Demand(1)">
            <span>{{ $t("more-tip") }}</span>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="listBox_r">
          <div class="titleSecond titleSecond-2">{{ $t("demand-t32") }}</div>
          <ul class="list">
            <li class="list_i" v-for="(item, idx) in listSupply" :key="idx" @click="go2DemandDetail(item)">
              <p class="list_i_t text_e-1">【{{ $t("demand-t32") }}】{{ item.title }}</p>
              <p class="list_i_date">{{ parseTime(item.createTime) }}</p>
            </li>
          </ul>
          <div class="more" @click="go2Demand(2)">
            <span>{{ $t("more-tip") }} &gt; </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getList } from "@/api/demand";
export default {
  data() {
    return {
      listSupply: [],
      listBuy: [],
      form: {
        pageSize: 3,
        pageNum: 1,
        type: 1,
        isHome: 1,
        orderByColumn: "homeSortOrder",
        isAsc: "asc",
      },
    };
  },
  mounted() {
    this.getListSupplyFun();
    this.getListBuyFun();
  },
  methods: {
    // 供应列表
    getListSupplyFun() {
      this.form.type = 2;
      this.invoke(getList, this.form).then((res) => {
        if (res && res.code == 200) {
          this.listSupply = res.rows;
        }
      });
    },
    // 求购列表
    getListBuyFun() {
      this.form.type = 1;
      this.invoke(getList, this.form).then((res) => {
        if (res && res.code == 200) {
          this.listBuy = res.rows;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.supply {
  padding: 130px 0 120px;
  p {
    margin: 0;
  }

  .homeTitle {
    margin-bottom: 90px;
  }

  .listBox {
    padding: 55px 50px;
    border-radius: 10px;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    justify-content: space-between;

    &_l,
    &_r {
      $w: 50%;
      flex: 0 0 $w;
      width: $w;
      box-sizing: border-box;
    }
    &_l {
      padding-right: 70px;
    }
    &_r {
      border-left: 1px solid #cacaca;
      padding-left: 90px;
    }
  }

  // 列表
  .list {
    &_i {
      cursor: pointer;
      margin-bottom: 65px;

      &_t {
        font-size: 24px;
        margin-bottom: 24px;
        color: #000;
        margin-left: -0.5em;

        &:hover {
          opacity: 0.7;
        }
      }

      &_date {
        font-size: 16px;
        color: #a3a3a3;
      }
    }
  }
  .more {
    font-size: 20px;
    padding-bottom: 8px;
    cursor: pointer;
    display: inline;
    color: #e65197;
    border-bottom: 2px solid #e65197;
  }

  .titleSecond {
    font-size: 32px;
    font-weight: 400;
    color: #fff;
    padding: 6px 16px;
    border-radius: 10px;
    margin-bottom: 76px;
    display: inline-flex;
    &-1 {
      background-color: #e35191;
    }
    &-2 {
      background-color: #659bfd;
    }
  }
  @media (min-width: 1441px) and (max-width: 1750px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1600});
    }
    padding: scale(100px) 0;
    .homeTitle {
      margin-bottom: scale(90px);
    }
    .listBox {
      padding: scale(55px) scale(50px);
      border-radius: scale(10px);
      &_l {
        padding-right: scale(70px);
      }
      &_r {
        padding-left: scale(90px);
      }
    }
    .list {
      &_i {
        margin-bottom: scale(65px);
        &_t {
          font-size: scale(20px);
          margin-bottom: scale(24px);
        }
        &_date {
          font-size: scale(16px);
        }
      }
    }
    .more {
      font-size: scale(20px);
      padding-bottom: scale(8px);
    }
    .titleSecond {
      font-size: scale(28px);
      padding: scale(6px) scale(16px);
      border-radius: scale(10px);
      margin-bottom: scale(60px);
    }
  }
  @media screen and (min-width: 1281px) and (max-width: 1440px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1440});
    }
    padding: scale(100px) 0;
    .homeTitle {
      margin-bottom: scale(90px);
    }
    .listBox {
      padding: scale(55px) scale(50px);
      border-radius: scale(10px);
      &_l {
        padding-right: scale(70px);
      }
      &_r {
        padding-left: scale(90px);
      }
    }
    .list {
      &_i {
        margin-bottom: scale(50px);
        &_t {
          font-size: scale(20px);
          margin-bottom: scale(24px);
        }
        &_date {
          font-size: scale(16px);
        }
      }
    }
    .more {
      font-size: scale(20px);
      padding-bottom: scale(8px);
    }
    .titleSecond {
      font-size: scale(28px);
      padding: scale(6px) scale(16px);
      border-radius: scale(10px);
      margin-bottom: scale(50px);
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1280px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1280});
    }
    padding: scale(100px) 0;
    .homeTitle {
      margin-bottom: scale(90px);
    }
    .listBox {
      padding: scale(55px) scale(50px);
      border-radius: scale(10px);
      &_l {
        padding-right: scale(70px);
      }
      &_r {
        padding-left: scale(90px);
      }
    }
    .list {
      &_i {
        margin-bottom: scale(50px);
        &_t {
          font-size: scale(20px);
          margin-bottom: scale(24px);
        }
        &_date {
          font-size: scale(16px);
        }
      }
    }
    .more {
      font-size: scale(20px);
      padding-bottom: scale(8px);
    }
    .titleSecond {
      font-size: scale(24px);
      padding: scale(6px) scale(16px);
      border-radius: scale(10px);
      margin-bottom: scale(60px);
    }
  }
  @media (max-width: 767px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_750});
    }
    padding: scale(100px) 0;
    .homeTitle {
      margin-bottom: scale(90px);
    }
    .listBox {
      padding: scale(55px) scale(50px);
      border-radius: scale(10px);
      &_l {
        padding-right: scale(70px);
      }
      &_r {
        padding-left: scale(90px);
      }
    }
    .list {
      &_i {
        margin-bottom: scale(65px);
        &_t {
          font-size: scale(20px);
          margin-bottom: scale(24px);
        }
        &_date {
          font-size: scale(16px);
        }
      }
    }
    .more {
      font-size: scale(20px);
      padding-bottom: scale(8px);
    }
    .titleSecond {
      font-size: scale(32px);
      padding: scale(6px) scale(16px);
      border-radius: scale(10px);
      margin-bottom: scale(76px);
    }
  }
}
</style>
